<template>
  <div>shallowReactive 和 shallowRef</div>
  <h3>m1:{{m1}}</h3>
  <h3>m2:{{m2}}</h3>
  <h3>m3:{{m3}}</h3>
  <h3>m4:{{m4}}</h3>
  <button @click="update">按钮</button>
</template>

<script>
import {defineComponent, shallowReactive, shallowRef,reactive,ref} from 'vue'
export default defineComponent({
  name: 'App',
  setup() {
    /* 
    shallowReactive:只处理了对象最外层属性的响应式  浅响应式
    shollowRef:只处理了value的响应式 不进行对象的reactive处理
    声明时候用浅响应式:  一般情况下用ref  reactive即可  如果有一个对象数据 结构比较省  但变化只是外层属性变化===>shallowReactive    如果有一个对象数据 后面会产生行的对象来替换===> shallowRef
    */
    const m1 = reactive({
      name:'小雨',
      age:20,
      car :{
        name:'玛莎拉蒂',
        color:'red'
      }
    })
    const m2 = shallowReactive({
      name:'小雨2',
      age:201,
      car :{
        name:'玛莎拉蒂',
        color:'red'
      }
    })
    const m3 = ref({
      name:'小雨3',
      age:202,
      car :{
        name:'玛莎拉蒂',
        color:'red'
      }
    })
    const m4 = shallowRef({
      name:'小雨4',
      age:203,
      car :{
        name:'玛莎拉蒂',
        color:'red'
      }
    })
    const update =()=>{
      // m2.name +='=='
      // m2.car.name += '=='
      // m4.value.name+='=='
      m4.value.car.name+='=='

    }
    return {
      m1,
      m2,
      m3,
      m4,
      update
    }
  }
})
</script>

<style lang="less" scoped>

</style>
